<template>
  <div style="width: 100%;height: 100%;">
    <el-table :ref="tableId" :data="tableData" :height="height">
      <el-table-column v-for="col in cols.filter(c => !c.hidden)"
                       :key="col.prop"
                       :prop="col.prop"
                       :label="col.label"
                       :formatter="col.formatter"
                       :width="col.width"
                       :type = "col.type"
                       min-width="12%">
        <template slot-scope="scope">
          <div v-if="col.template" v-html="col.template(scope.row)">
          </div>
          <span v-else>
            {{col.formatter ? col.formatter(scope.row) : scope.row[col.prop]}}
          </span>
          <el-button size="mini" :key="i" :icon="o.icon" :type="o.type" v-for="(o,i) in col.operations"  @click="o.handler ? o.handler(scope.row) : ''">{{o.label}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <div class="pagination-prev" @click="changePage(-1)">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="pagination-index-container" v-if="pageCount < 11">
        <div :key="i" :class="'pagination-index'+(i===pageNum ? ' active':'')" v-for="i in pageCount" @click="pageNum = i">
          {{i}}
        </div>
      </div>
      <div class="pagination-index-container" v-if="pageCount > 10">
        <div :key="i" :class="'pagination-index'+(i===pageNum ? ' active':'')" v-for="i in splitPageCount[0]" @click="pageNum = i">
          {{i}}
        </div>
        <div>
          …
        </div>
        <div :key="i" :class="'pagination-index'+(i===pageNum ? ' active':'')" v-for="i in splitPageCount[1]" @click="pageNum = i">
          {{i}}
        </div>
      </div>
      <div class="pagination-next" @click="changePage(1)">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DyTable',
  props: {
    height: {
      type: [Number, String],
      default: 500
    },
    pageSize: {
      type: Number,
      default: 10 // 默认显示10条
    }, // 每页显示条数
    total: {
      type: Number,
      default: 1
    },
    cols: {
      type: Array,
      default () {
        return []
      }
    }, // 列集合
    rows: {
      type: Array,
      default () {
        return []
      }
    }, // 数据集合
    url: { type: String }, // 接口地址
    update: { type: Boolean },
    loop: { type: Boolean }, // 是否循环页码
    method: { type: String }, // 请求方式(get,post)
    params: { type: Object }, // 请求参数
    isAll: { type: Boolean } // 是否为所有数据（用于静态分页）
  },
  data () {
    return {
      tableId: null,
      tableData: [],
      pageNum: 1, // 当前页
      pageCount: null,
      splitPageCount: [
        [],
        []
      ]
    }
  },
  watch: {
    pageNum: {
      handler (v) {
        this.url && this.getTableData()
        if (this.isAll) {
          this.tableData = this.rows.slice((v - 1) * this.pageSize, v * this.pageSize)
        } else {
          this.$emit('pageChange', this.pageSize, v)
        }
      },
      immediate: true
    },
    update: {
      handler (val) {
        if (val) {
          this.getTableData()
        }
      },
      immediate: true
    }
  },
  methods: {
    /**
     * 获取表格数据
     */
    getTableData () {
      if (this.url) {
        this.$http[this.method ? this.method.toUpperCase() : 'GET'](this.url, { ...this.params }, { pageSize: this.pageSize, pageNum: this.pageNum }).then(res => {
          this.tableData = new Array(res.data.rows.length)
          res.data.rows.forEach((item, index) => {
            this.$set(this.tableData, index, item)
          })
          if (this.pageCount === null) {
            this.setPageCount(res.data.total) // 计算总页数
            if (this.pageCount > 10) {
              this.splitPageCount[0] = [1, 2, 3, 4, 5, 6, 7]
              this.splitPageCount[1] = [this.pageCount - 2, this.pageCount - 1, this.pageCount]
            }
          }
        })
      }
    },
    setPageCount (total) {
      this.$set(this, 'pageCount', Math.ceil(total / this.pageSize)) // 计算总页数
    },
    changePage (num) {
      let pageNum = this.pageNum
      pageNum += num
      if (pageNum > this.pageCount) {
        pageNum = this.loop ? 1 : this.pageNum
      } else if (pageNum < 1) {
        pageNum = this.loop ? this.pageCount : 1
      }
      this.pageNum = pageNum
      if (this.pageCount > 10 && this.pageNum > 7 && this.pageNum < this.pageCount - 2) {
        const count1 = []
        for (let i = 6; i >= 0; i--) {
          count1.push(this.pageNum - i)
        }
        this.splitPageCount[0] = count1
      } else {
        this.splitPageCount[0] = [1, 2, 3, 4, 5, 6, 7]
      }
    }
  },
  created () {
    if (this.rows) {
      this.tableData = this.rows.slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize)
      if (this.isAll) {
        this.setPageCount(this.rows.length)
      }
    }
    this.tableId = 'hztb+' + new Date().getTime()
  }
}
</script>

<style scoped>
/deep/.el-table {
  width: 100% !important;
  border: 1px solid teal !important;
}

/deep/.el-table--fit {
  border-right: 1px solid teal !important;
  border-bottom: 1px solid teal !important;
}

/deep/.el-table td, /deep/.el-table th.is-leaf {
  border-bottom-color: teal !important;
}

/deep/.el-table th, /deep/.el-table tr, /deep/.el-table, /deep/.el-table__expanded-cell {
  background-color: transparent !important;
}

/deep/.el-table thead {
  color: teal !important;
}

/deep/.el-table--border::after, /deep/.el-table--group::after, /deep/.el-table::before {
  background-color: transparent !important;
}

/deep/.el-table__body tr.current-row > td {
  background-color: teal !important;
}

/deep/.el-table {
  color: #333 !important;
}

/deep/.el-table.el-table--fit.el-table--enable-row-hover.el-table--enable-row-transition {
  height: calc(100% - 44px);
}

.pagination {
  height: 44px;
  border: 1px solid teal;
  border-top: 0;
  display: flex;
}
.pagination .pagination-index-container{
  display: flex;
}
.pagination .pagination-index-container .pagination-index{
  width: 60px;
  height: 100%;
  line-height: 44px;
  text-align: center;
  color: #333;
  cursor: pointer;
  transition: all .2s;
}
.pagination .pagination-prev,.pagination .pagination-next {
  width: 10%;
  height: 100%;
  line-height: 44px;
  text-align: center;
  color: #333;
  cursor: pointer;
  transition: all .2s;
}
.pagination .pagination-index.active,.pagination .pagination-prev:hover,.pagination .pagination-index:hover,.pagination .pagination-next:hover{
  background-color: teal;
  color: #eee;
}
.pagination .pagination-prev,.pagination .pagination-next,.pagination .pagination-index{
  border-right: 1px solid teal;
}
.el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell{
  padding-left: 0 !important;
}
.el-table .cell, .el-table th div{
  padding-right: 0 !important;
}
</style>
